<template>
	<view class="my-container">
		<!-- 未登录状态 -->
		<view v-if="!isLoggedIn" class="login-prompt">
			<view class="login-card">
				<view class="login-icon">👤</view>
				<text class="login-title">您还未登录</text>
				<text class="login-desc">登录后可以查看我的预约、管理个人信息</text>
				<view class="login-btn" @click="goToLogin">
					<text class="btn-text">立即登录</text>
				</view>
			</view>
		</view>
		
		<!-- 已登录状态 -->
		<template v-else>
			<!-- 用户信息区域 -->
			<view class="user-section">
				<view class="user-card">
					<view class="user-content">
						<view class="user-info">
							<text class="username">{{ userInfo.nickname || '加载中...' }}</text>
							<text class="department">{{ userInfo.department || '加载中...' }}</text>
							<text class="loading-text" v-if="isLoading">正在获取最新信息...</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 功能菜单区域 -->
			<view class="menu-section">
				<view class="menu-card">
					<view class="menu-item" @click="navigateTo('/pages/my/bookings')">
						<image class="menu-icon" src="/static/icon_1.png" mode="aspectFit"></image>
						<view class="menu-content">
							<text class="menu-text">我的预约</text>
							<!-- 待审核,即将开始,进行中 三种状态 -->
							<text class="menu-desc">查看已完成、已拒绝、已取消的预约</text>
						</view>
						<image class="menu-arrow" src="/static/right.png" mode="aspectFit"></image>
					</view>
					<view class="menu-item" @click="navigateTo('/pages/my/changePassword')">
						<image class="menu-icon" src="/static/icon_3.png" mode="aspectFit"></image>
						<view class="menu-content">
							<text class="menu-text">修改密码</text>
							<text class="menu-desc">修改您的登录密码</text>
						</view>
						<image class="menu-arrow" src="/static/right.png" mode="aspectFit"></image>
					</view>
					<!-- <view class="menu-item" @click="navigateTo('/pages/my/history')">
						<image class="menu-icon" src="/static/icon_2.png" mode="aspectFit"></image>
						<view class="menu-content">
							<text class="menu-text">预约历史</text>
							<text class="menu-desc">查看已完成、已拒绝、已取消的预约</text>
						</view>
						<image class="menu-arrow" src="/static/right.png" mode="aspectFit"></image>
					</view> -->
				</view>
			</view>
			
			<!-- 退出登录区域 -->
			<view class="logout-section">
				<view class="logout-card">
					<view class="logout-btn" @click="logout">
						<text class="btn-text">退出登录</text>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import api, { handleApiError } from '@/utils/api.js'

export default {
	data() {
		return {
			userInfo: {
				nickname: '加载中...',
				department: '加载中...'
			},
			isLoading: false,
			isLoggedIn: false
		}
	},
	onLoad() {
		this.checkLoginStatus();
	},
	onShow() {
		// 每次显示页面时检查登录状态
		this.checkLoginStatus();
	},
	methods: {
		checkLoginStatus() {
			// 检查是否有token
			const token = uni.getStorageSync('token');
			this.isLoggedIn = !!token;
			
			// 如果已登录，加载用户信息
			if (this.isLoggedIn) {
				this.loadUserInfo();
			}
		},
		async loadUserInfo() {
			// 先从本地存储读取用户信息作为默认值
			const storedUserInfo = uni.getStorageSync('userInfo');
			if (storedUserInfo) {
				this.userInfo = storedUserInfo;
			}
			
			// 从接口获取最新用户信息
			this.isLoading = true;
			try {
				const response = await api.getUserInfo();
				
				if (response && response.code === 200) {
					const user = response.user;
					// 更新用户信息
					this.userInfo = {
						userId: user.userId,
						userName: user.userName,
						nickname: user.nickName,
						department: user.dept?.deptName || '未知部门',
						email: user.email || '',
						phone: user.phonenumber || '',
						avatar: user.avatar || '',
						roles: response.roles || [],
						permissions: response.permissions || []
					};
					
					// 更新本地存储
					uni.setStorageSync('userInfo', this.userInfo);
				} else {
					console.error('获取用户信息失败:', response.msg);
					// 如果接口失败，保持本地存储的信息
				}
			} catch (error) {
				console.error('获取用户信息错误:', error);
				// 如果接口失败，保持本地存储的信息
			} finally {
				this.isLoading = false;
			}
		},
		goToLogin() {
			uni.navigateTo({
				url: '/pages/login/index'
			});
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		logout() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 使用统一的登出工具
						import('@/utils/auth.js').then(({ logout }) => {
							logout();
						});
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.my-container {
	padding: 30rpx;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: 100vh;
}

/* 用户信息区域 */
.user-section {
	margin-bottom: 30rpx;
}

.user-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.user-content {
	display: flex;
	align-items: center;
}

.user-info {
	width: 100%;
}

.username {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.department {
	font-size: 28rpx;
	color: #666;
	opacity: 0.8;
}

.loading-text {
	font-size: 24rpx;
	color: #999;
	opacity: 0.8;
	margin-top: 10rpx;
	display: block;
}



/* 功能菜单区域 */
.menu-section {
	margin-bottom: 30rpx;
}

.menu-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
	transition: all 0.3s ease;
	cursor: pointer;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background: rgba(240, 240, 240, 0.5);
	transform: scale(0.98);
}

.menu-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 25rpx;
}

.menu-content {
	flex: 1;
}

.menu-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.menu-desc {
	font-size: 24rpx;
	color: #666;
	opacity: 0.8;
}

.menu-arrow {
	width: 32rpx;
	height: 32rpx;
	opacity: 0.6;
}

/* 退出登录区域 */
.logout-section {
	margin-bottom: 30rpx;
}

.logout-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.logout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24rpx 20rpx;
	background: #ff4d4f;
	color: #fff;
	border: none;
	border-radius: 0;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
	text-align: center;
}

.logout-btn:active {
	background: #ff7875;
	transform: scale(0.98);
}

.btn-text {
	font-weight: 600;
}

.btn-icon {
	font-size: 28rpx;
}

/* 未登录提示区域 */
.login-prompt {
	margin-top: 100rpx;
}

.login-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 80rpx 40rpx;
	text-align: center;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.login-icon {
	font-size: 120rpx;
	margin-bottom: 30rpx;
	display: block;
}

.login-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 20rpx;
}

.login-desc {
	font-size: 28rpx;
	color: #666;
	display: block;
	margin-bottom: 50rpx;
	line-height: 1.6;
}

.login-btn {
	display: inline-block;
	padding: 24rpx 60rpx;
	background: #2870E5;
	color: #fff;
	border-radius: 50rpx;
	font-size: 28rpx;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
}

.login-btn:active {
	background: #1e5bb8;
	transform: scale(0.95);
}

</style> 